import React, { useReducer, useEffect } from 'react';
import Link from '@zhangcheck/mp-ui/components/link';
import reducer from '@zhangcheck/mp-react/reducer';
import s from './home.css';

const initialState = {};

function Home() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className={`flexV ${s.home}`}>
      {/*头部*/}
      <h1>MP-UI</h1>
      <section>MP-UI是使用React原生技术栈, 同时开发h5和微信小程序的前端框架。</section>
      <section>
        <h4>特色</h4>
        <ul>
          <li>一套代码同时生成H5和微信小程序应用</li>
          <li>使用下一代js语言--ES6,ES7,ES8等</li>
          <li>使用下一代css语言--CSS Module.</li>
          <li>使用下一代react语言--React Hooks.</li>
          <li>使用原生React技术栈</li>
          <li>使用原生标准html标签，而非包装后的"view","image"标签</li>
          <li>框架使用webpack4打包项目，使用react-router4导航路由</li>
          <li>易用的脚手架工具，方便的生成项目及页面 (@zhangcheck/mp-cli)</li>
          <li>同时适应H5和小程序的组件库 (@zhangcheck/mp-ui)</li>
          <li>支持预编译，各端最小化发布</li>
          <li>库即源码，个性化定制易如反掌</li>
          <li>框架使用rem和px作为布局单位（微信小程序中，框架自动将rem转化为微信小程序单位rpx）</li>
        </ul>
      </section>

      <section>
        <h4>起步</h4>
        <div style={{ padding: 20 }}>
          <div>安装脚手架：npm i -g @zhangcheck/mp-cli</div>
          <div>创建项目：mp-cli create project myProject</div>
          <div>进入项目：cd myProject</div>
          <div>安装依赖：yarn install</div>
          <div>启动微信小程序：yarn start</div>
          <div>启动开发版H5: yarn web</div>
          <div>发布H5: yarn build</div>
          <div>新增页面: mp-cli create page myPage</div>
        </div>
      </section>

      <section>
        <h4>组件</h4>
        <div style={{ padding: 20 }}>
          <Link to="/pages/mp-ui/index"> 查看基础组件库 </Link>
          <div>
            (重要提示：为了mp-ui大家族，开发者扩展的通用组件的npm包，<span style={{ color: 'red' }}>请以"mp-ui-组件名"命名</span>)
          </div>
        </div>
      </section>

      <section>
        <h4>JS语法</h4>
        <p>框架使用标准react语法：</p>
        <pre>
          {`import React, { useReducer } from 'react';
import merge from 'lodash/merge';
import reducer from '@zhangcheck/mp-react/reducer';
import s from './somepage.css';

const initialState = {
  someState: 0,
};

export default function Something() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div className={s.someClass} onClick={()=>{dispatch({ someState: state.someState + 1 })}}>
      state: {state.someState}
    </div>);
}
`}
        </pre>
      </section>

      <section>
        <h4>CSS语法</h4>
        <p>框架使用css module语法，支持变量、嵌套等；以下为例子：</p>
        <pre>
          {`
/** 全局样式 **/
:global(.someClass1) {
  color: red;
}
.someClass2{
  color: green;
  & > .someSubClass {
    color: yellow;
  }
}
`}
        </pre>
      </section>

      <section>
        <h4>预编译语法</h4>
        <p>框架使用"IF()... ELSE IF()... END"格式的预编译语法，预编译在打包时执行，而非运行时，所以代码体积小；以下为例子：</p>
        <pre>
          {`
function someComponent() {
  let someContent;
  IF(process.env.isMiniprogram)
    someContent = <div>This will be complied into Miniprogram</div>;
  ELSE
    someContent = <div>This will be complied into H5</div>;
  END
  return (
     <div>
        以下部分，在不同环境下，将被编译为不同的内容。
       <div> {someContent} </div>
     </div>
   );
}`}
        </pre>
      </section>
    </div>
  );
}

export default Home;
